<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <!-- 检索表单 -->
  <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()">
    <nz-row nzGutter="8">
      <nz-col nzSm="24">
        <nz-form-item>
          <nz-form-label>
            名称
          </nz-form-label>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" name="filterText"
                [placeholder]="'搜索...'">
              <ng-template #suffixButton>
                <button nz-button nzType="primary" nzSearch type="submit">
                  <i class="anticon anticon-search"></i>
                </button>
              </ng-template>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            创建日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="CreateDateRange" [(ngModel)]="createStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="6"></nz-col>
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            修改日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="UpdateDateRange" [(ngModel)]="updateStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </form>

  <!-- 操作部分 -->
  <nz-row nzGutter="8">
    <nz-col nzMd="20" nzSm="12" class="btn-gutter">
    </nz-col>
    <nz-col nzMd="4" nzSm="12" class="text-right">
      <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
        显示高级过滤
        <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
      </a>
    </nz-col>
  </nz-row>

  <nz-table #roleTable [nzFrontPagination]="false" [nzData]="tableHelper.records" [nzTotal]="tableHelper.totalRecordsCount"
    [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" [nzLoading]="tableHelper.isLoading"
    nzNoResult="暂无数据" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
    <thead (nzSortChange)="sort($event)">
      <tr>
        <th nzShowSort nzSortKey="name">名称</th>
        <th nzShowSort nzSortKey="creationTime">创建时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data [ngForOf]="roleTable.data">
        <tr>
          <td>{{data.name}}</td>
          <td>{{data.creationTime ? (data.creationTime | date:'yyyy-MM-dd') : '-'}}</td>
          <td class="table_operate">
            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.ArticleSourceInfo.Edit')">
              <a (click)="editBuildingPlan(data)">
                <i nz-icon [type]="'edit'" theme="fill"></i> 编辑
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <!-- 删除 -->
            <ng-container *ngIf="isGranted('Pages.ArticleSourceInfo.Delete')">
              <nz-popconfirm nzTitle="是否确定删除此项？" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deleteConfirm(data.id)">
                <a nz-popconfirm>
                  <i nz-icon [type]="'delete'" theme="fill"></i>
                  删除
                </a>
              </nz-popconfirm>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'article-source'" theme="fill"></i> 文章来源
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate" *ngIf="isGranted('Pages.ArticleSourceInfo.Create')">
    <a (click)="createBuildingPlan()">创建</a>
  </div>
</ng-template>